<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notepad</title>

  <!-- bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

  <!-- animate.css -->
  <link rel="stylesheet" href="./assets/css/animate.min.css" />

  <!-- mui -->
  <link rel="stylesheet/less" href="./assets/plugins/mui/css/mui.min.css" />

  <!-- 下拉刷新，上拉加载 -->
  <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css">

  <!-- 重置样式 -->
  <link rel="stylesheet/less" href="./assets/css/reset.less" />

  <!-- 公共样式 -->
  <link rel="stylesheet/less" href="./assets/css/common.less" />

  <!-- 页面独立的 -->
  <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>

<body>
  <!-- 搜索 -->
  <div class="search">
    <div class="box">
      <div class="icon">
        <span class="glyphicon glyphicon-search"></span>
      </div>

      <input class="input" placeholder="请输入名字" id="search" />

      <button class="btn" size="mini" type="default">搜索</button>
    </div>
  </div>

  <!-- 列表 -->
  <div class="meScroll" id="meScroll">
    <ul class="mui-table-view">
      <!-- <li class="mui-table-view-cell">
        item1
        <button type="button" class="mui-btn mui-btn-success">添加</button>,
        <button type="button" class="mui-btn mui-btn-danger">删除</button>,
      </li> -->
    </ul>
  </div>
  <!-- 底部 -->
  <div class=" bottombtn">
    <a href="typeadd.html" type="button" class="mui-btn mui-btn-danger">添加分类</a>
  </div>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- 引入接口插件+封装请求的方法 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- bootstrap-validator -->
<script src="./assets/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>

<!-- 引入cookie封装 -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 下拉刷新，上拉加载 -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<script>
  //实例化wow.js
  new WOW().init();

  // 搜索功能
  let search = "";
  $("button[type ='default']").click(function () {
    search = $.trim($(".input").val());
    downCallback();
  })

  let business = cookie.get("business") ? cookie.get("business") : {};
  business = JSON.parse(business);

  let meScroll = new MeScroll("meScroll", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
    down: {
      auto: false,
      isBounce: true,
      callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
    },
    up: {
      auto: true,
      isBounce: true,
      callback: upCallback,
      toTop: {
        //回到顶部按钮
        duration: 600,
        src: "./assets/plugins/mescroll/a1ac5449856aa3281f069562d729b2be.png", //图片路径,默认null,支持网络图
        offset: 100, //列表滚动1000px才显示回到顶部按钮	
        supportTap: true,
      },
    }
  });

  async function downCallback(params) {
    // 清空内容
    $("#meScroll ul").empty();
    // 刷新重置内容
    meScroll.resetUpScroll();
    console.log("下拉刷新完成");
  }

  async function upCallback(page) {
    let data = {
      page: page.num,
      limit: page.size,
      businessid: business.id,
      search: search,
    };
    let result = await POST({ url: "card/type/index", params: data });

    if (result.code == 1) {
      let count = result.data ? result.data.count : 0;
      let list = result.data ? result.data.list : [];

      meScroll.endBySize(list.length, count);

      fetchList(list);//将数据添加到网页中

      mui.toast(result.msg);
    } else {
      meScroll.endBySize(0, 0);
      mui.toast(result.msg);
      return false;
    }
  }

  function fetchList(list = []) {
    if (list.length > 0) {
      let content = "";

      for (let item of list) {
        content = `
            <li class="mui-table-view-cell">
              ${item.name}
              <button type="button" class="mui-btn mui-btn-success" onclick="onEdit(${item.id},'${item.name}')">编辑</button>
              <button type="button" class="mui-btn mui-btn-danger" onclick="onDelete(${item.id},${item.name})">删除</button>
            </li>
            `;

        $("#meScroll ul").append(content)
      }
    }
  }


  function onEdit(typeid, typename) {
    location.href = `typeedit.html?typeid=${typeid}`;
  }

  function onDelete(typeid, typename) {
    mui.confirm(
      "是否确认删除" + typename + "分类",
      "确认删除",
      ["确认", "取消"],
      async function (res) {
        if (res.index === 0) {
          let params = {
            businessid: business.id,
            typeid,
          }
          let result = await POST({
            url: "card/type/del",
            params: params,
          })
          if (result.code === 1) {
            mui.toast(result.msg)
            downCallback();
          } else {
            mui.toast(result.msg)
            return false;
          }

        }

      }


    )
  }

</script>